<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>路由传参</title>
</head>
<body>
<div id="app">
    <router-link to="/" tag="button">首页</router-link>
    <router-link to="/news">新闻</router-link>
    <router-link to="/books">图书</router-link>
    <router-view></router-view>
</div>
<template id="tem1">
    <h2>这是首页</h2>
</template>
<template id="tem2">
    <div>
        <h2>新闻</h2>
        <router-link to="/news/1">第一条新闻</router-link>
        <router-link to="/news/2">第二条新闻</router-link>
        <router-link to="/news/3">第三条新闻</router-link>
        <router-view></router-view>
    </div>
</template>
<template id="tem3">
    <h2>这是图书页面</h2>
</template>
<template id="tem4">
    <!-- 子组件获取参数 -->
    <h4>新闻ID：{{this.$route.params.id}}</h4>
</template>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
    const Home = {
        template: "#tem1"
    }
    const News = {
        template: "#tem2"
    }
    const Books = {
        template: "#tem3"
    }
    const song = {
        template: "#tem4"
    }
    const routes = [{
        path: "/",
component: Home
    },{
        path: "/news",
            component: News,
    },{
        path: "/books",
            component: Books
    },{
        path: '/news/:id',
            component: song
    }]
    const router = new VueRouter({
        routes
    })
    new Vue({
        el: "#app",
        router: router,
    })
</script>